<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/knockout-3.3.0.js"></script>

</head>
<body>
	<p>
		Choose some countries you'd like to visit: <select
			data-bind="options: availableCountries, selectedOptions: chosenCountries"
			size="5" multiple="true"></select>
	</p>

	<script type="text/javascript">
		var viewModel = {
			availableCountries : ko.observableArray([ 'France', 'Germany',
					'Spain' ]),
			chosenCountries : ko.observableArray([ 'Germany' ])
		// Initially, only Germany is selected
		};

		// ... then later ...
		viewModel.chosenCountries.push('France'); // Now France is selected too
		ko.applyBindings(viewModel);
	</script>
</body>
</html>